<template>
  <div class="login">
    <a-icon type="shopping-cart" style="font-size: 20px"/>
    <a-divider type="vertical"/>
    <div style="display: inline-block">
      <span style="margin-right: 8px" @click="showModal" v-if="!($store.state.isLogin)">登录/注册<a-avatar icon="user"
                                                                                        style="width: 32px; height: 32px; line-height: 32px; font-size: 16px;margin-left: 5px"/></span>
      <span v-else>
        <a-dropdown>
    <a class="ant-dropdown-link" @click="e => e.preventDefault()">
     {{userInfo.nickname }}<a-avatar
        :src="userInfo.avatarUrl || 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png'"/>
    </a>
          <!--    下拉框      -->
    <a-menu slot="overlay">
      <a-menu-item>
        <router-link to="/mine">个人中心</router-link>
      </a-menu-item>
      <a-menu-item>
        <a href="#" @click="logout">退出登录</a>
      </a-menu-item>
    </a-menu>
          <!--    模态框      -->
  </a-dropdown>
      </span>
      <a-modal v-model="showLogin" title="" @ok="handleOk" :width="width" :bodyStyle="style" :footer="null" :closable="false">
        <button class="close" @click="close"><a-icon type="close" /></button>
        <div class="model">
          <ul class="modeltop">
            <li @click="show" ref="common" style="color: #00cf8c;border-bottom: 2px solid #00cf8c">普通登录</li>
            <li @click="phoneShow" ref="phone">手机登录</li>
          </ul>
          <!--    普通登录      -->
          <a-form-model :layout="form.layout" :model="form" v-bind="formItemLayout" :wrapperCol="inputStyle"
                        v-show="number==0">
            <a-form-model-item>
              <span class="user"><a-icon type="user"/></span>
              <a-input v-model="form.fieldA" placeholder="请输入账号" style="padding-left: 30px"/>
            </a-form-model-item>
            <a-form-model-item>
              <span class="user"><a-icon type="lock"/></span>
              <a-input v-model="form.fieldB" placeholder="请输入密码" style="padding-left: 30px" type="password"/>
            </a-form-model-item>
            <button class="userok" @click="request">登录</button>
            <span style="float: left;margin-top: 10px" class="register" @click="showModal1">立即注册</span>
            <span style="float: right; margin-top: 10px" class="forget" @click="showModal2">忘记密码</span>
          </a-form-model>
          <!--    手机登录      -->
          <a-form-model :layout="form.layout" :model="form" v-bind="formItemLayout" :wrapperCol="inputStyle"
                        v-show="number==1">
            <a-form-model-item>
              <span class="user"><a-icon type="user"/></span>
              <a-input v-model="form.userphone" placeholder="请输入手机号" style="padding-left: 30px;"/>
            </a-form-model-item>
            <a-form-model-item>
              <span class="user"><a-icon type="lock"/></span>
              <a-input v-model="form.userphoneOk" placeholder="请输入验证码" style="padding-left: 30px; width: 55%"/>
              <a-button v-html="time" :disabled="disabled" @click="getphoneverification"
                        style="width: 112px; margin-left: 10px; background-color: #00cf8c;border-radius: 5px;color: #FFFFFF">
              </a-button>
            </a-form-model-item>
            <button class="userok" @click="moblielogin">登录</button>
            <span style="float: left;margin-top: 10px" class="register" @click="showModal1">立即注册</span>
            <span style="float: right; margin-top: 10px" class="forget" @click="showModal2">忘记密码</span>
          </a-form-model>
        </div>
      </a-modal>
      <!--   立即注册   -->
      <a-modal v-model="visibleother" title="" @ok="handleOk" :width="width" :bodyStyle="style" :footer="null">
        <h3 style="width: 200px; margin:0 auto 20px; text-align: center; color: #00cf8c;border-bottom: 2px solid #00cf8c">
          普通注册</h3>
        <a-form-model :layout="form.layout" :model="form" v-bind="formItemLayout" :wrapperCol="inputStyle">
          <a-form-model-item label="账号">
            <a-input v-model="form.account" placeholder="请输入账号（6-20位非纯数字）" style="width:75%;float: right;"/>
          </a-form-model-item>
          <a-form-model-item label="密码">
            <a-input v-model="form.password" type="password" placeholder="请输入密码（6-20位非纯数字）"
                     style="width:75%;float: right;"/>
          </a-form-model-item>
          <a-form-model-item label="确认密码">
            <a-input v-model="form.passwordOK" type="password" placeholder="请再次输入密码" style="width:75%;float: right;"/>
          </a-form-model-item>
          <a-form-model-item label="昵称">
            <a-input v-model="form.username" placeholder="请输入你的昵称" style="width:75%;float: right;"/>
          </a-form-model-item>
          <a-form-model-item label="手机号码">
            <a-input-group compact style="float: right;width: 75%;">
              <a-select default-value="Option1" style="border-right: 0">
                <a-select-option value="Option1">
                  +86
                </a-select-option>
              </a-select>
              <a-input v-model="form.userphone" placeholder="请输入手机号" style="width:71.7%;float: right;"/>
            </a-input-group>
          </a-form-model-item>
          <a-form-model-item label="验证码">
            <a-input v-model="form.userOk" placeholder="请输入验证码" style="width:38%;float: left;"/>
            <a-button style="float: right;background-color: #00cf8c;color: #FFFFFF; width: 102px"
                      @click="getverification" v-html="time" :disabled="disabled"></a-button>
          </a-form-model-item>
          <a-button style="width: 100%;background-color: #00cf8c;color: #FFFFFF;text-align: center" @click="signup">注册
          </a-button>
          <span @click="backLogin" style="margin-left:242px;display:block;margin-top: 10px;">去登录</span>
        </a-form-model>

      </a-modal>
      <!--   忘记密码   -->
      <a-modal v-model="visibleAnother" title="" @ok="handleOk" :width="width" :bodyStyle="style" :footer="null">
        <div class="model">
          <h2 style="text-align: center">忘记密码</h2>
          <a-form-model :layout="form.layout" :model="form" v-bind="formItemLayout" :wrapperCol="inputStyle">
            <a-form-model-item>
              <a-input v-model="form.account" placeholder="请输入账号" style="padding-left: 30px;"/>
            </a-form-model-item>
            <a-form-model-item>
              <a-input-password v-model="form.newpassword" placeholder="请输入新密码"/>
            </a-form-model-item>
            <a-form-model-item>
              <a-input-password v-model="form.newpassword" placeholder="请再次输入新密码"/>
            </a-form-model-item>
            <a-form-model-item>
              <a-input v-model="form.userphone" placeholder="请输入手机号" style="padding-left: 30px;"/>
            </a-form-model-item>
            <a-form-model-item>
              <a-input v-model="form.userOkAngin" placeholder="请输入验证码" style="padding-left: 30px; width: 55%"/>
              <a-button v-html="time" :disabled="disabled" @click="forget"
                        style="width: 40%; margin-left: 10px; background-color: #00cf8c;border-radius: 5px;color: #FFFFFF">
                发送验证码
              </a-button>
            </a-form-model-item>
            <button class="userok" @click="forgetOk">确认更改密码</button>
            <span style="float: left;margin-top: 10px" class="register" @click="showModal1">立即注册</span>
            <span style="float: right; margin-top: 10px" class="forget" @click="backLogin">去登录</span>
          </a-form-model>
        </div>
      </a-modal>
    </div>
  </div>

</template>

<script>
import {
  login,
  verfication,
  signIn,
  phoneLogin,
  phoneverfication,
  forget,
  forgetPassword
} from "@/api/api";
import {mapState} from "vuex";

export default {
  name: "Login",
  data() {
    return {
      number: 0,
      // visible:false,
      visibleother: false,
      visibleAnother: false,
      width: '360px',
      style: {padding: "24px 36px"},
      form: {
        layout: 'horizontal',
        fieldA: '',
        fieldB: '',
        account: "",
        password: "",
        passwordOK: "",
        username: "",
        userphone: "",
        userOk: "",
        newpassword: "",
        userOkAngin: "",
        userphoneOk: ""
      },
      inputStyle: {
        width: "100%",
      },
      //验证码
      disabled: false,
      time: "获取验证码",
      time1: 60,
      timer: null,
    }
  },
  methods: {
    showModal() {
      // this.visible = true;
      this.$store.commit("changeShowLogin",true)
    },
    showModal1() {
      this.visibleother = true;
      this.visibleAnother = false;
      // this.visible = false;
      this.$store.commit("changeShowLogin",false)
    },
    showModal2() {
      this.visibleother = false;
      // this.visible = false;
      this.$store.commit("changeShowLogin",false)
      this.visibleAnother = true
    },
    backLogin() {
      this.visibleother = false;
      this.visibleAnother = false;
      // this.visible = true;
      this.$store.commit("changeShowLogin",true)
    },
    handleOk(e) {
      (e);
      // this.visible = false;
      this.$store.commit("changeShowLogin",false)
    },
    close(){
      this.$store.commit("changeShowLogin",false)
    },
    show() {
      this.number = 0
      this.$refs.common.style.color = "#00cf8c"
      this.$refs.common.style.borderBottom = "2px solid #00cf8c"
      this.$refs.phone.style.color = ""
      this.$refs.phone.style.borderBottom = ""
    },
    phoneShow() {
      this.number = 1
      this.$refs.common.style.color = ""
      this.$refs.common.style.borderBottom = ""
      this.$refs.phone.style.color = "#00cf8c"
      this.$refs.phone.style.borderBottom = "2px solid #00cf8c"
    },
    countDown() {
      this.timer = setInterval(() => {
        this.disabled = true
        this.time1--
        this.time = `${this.time1}s`
        if (this.time1 == 0) {
          this.disabled = false
          this.time = "获取验证码"
          clearInterval(this.timer);
        }
      }, 1000)
    },
    //登录
    request() {
      login(this.form.fieldA, this.form.fieldB).then(res => {
        // (res)
        if (res.code == 0) {
          this.$store.commit("changeUserInfo",{isLogin:true,userInfo:res.userInfo})
          this.$store.commit("changeShowLogin",false)
          this.$message.success('登录成功！');

        }
      })
    },
    //手机号登录
    moblielogin() {
      phoneLogin(this.form.userphone, this.form.userphoneOk).then(res => {
        // (res)
        if (res.code == 0) {
          this.$store.commit("changeUserInfo",{isLogin:true,userInfo:res.userInfo})
          this.$store.commit("changeShowLogin",false)
          this.$message.success('登录成功！');
        }
      })
    },

    //获取验证码
    getverification() {
      verfication(this.form.userphone).then(res => {
        // (res)
        res
      }),
          this.countDown()
    },
    //获取手机登录验证码
    getphoneverification() {
      phoneverfication(this.form.userphone).then(res => {
        // (res)
        res
      }),
          this.countDown()
    },
    //获取忘记密码验证码
    forget() {
      forget(this.form.account, this.form.userphone).then(res => {
        // (res)
        res
      }),
          this.countDown()
    },
    //忘记密码
    forgetOk() {
      forgetPassword(this.form.account, this.form.newpassword, this.form.userphone, this.form.userOkAngin).then(res => {
        // (this.form.newpassword)
        // (res)
        if (res.code == 0) {
          this.$message.success('修改成功！');
          this.backLogin()
        }
      })
    },
    //注册
    signup() {
      signIn(this.form.account, this.form.userOk, this.form.userphone, this.form.password, this.form.username).then(res => {
        // (res)
        if (res.code == 0) {
          this.$message.success('注册成功！');
          this.backLogin()
        }
      })
    },
    //  退出登录
    logout() {
      this.$store.dispatch("lagOut")
    }
  },
  created() {},
  computed: {
    formItemLayout() {
      const {layout} = this.form;
      return layout === 'horizontal'
          ? {
            labelCol: {span: 6},
            wrapperCol: {span: 14},
          }
          : {};
    },
    buttonItemLayout() {
      const {layout} = this.form;
      return layout === 'horizontal'
          ? {
            wrapperCol: {span: 14, offset: 4},
          }
          : {};
    },
    ...mapState({
      showLogin:"showLogin",
      isLogin:"isLogin",
      userInfo:"userInfo"
    }),
  },
}
</script>

<style scoped lang="less">
.close{
  float: right;
  position: relative;
  top: -6px;
  right: -15px;
  border: 0;
  outline: 0;
  background-color: #FFFFFF;

}
.model {
  width: 288px;
  position: relative;
  overflow: hidden;
  top: -7px;

  .modeltop {
    overflow: hidden;
    width: 288px;
    margin: 0;
    margin-bottom: 10px;

    li {
      float: left;
      width: 50%;
      height: 50px;
      text-align: center;
      line-height: 50px;

      &:hover {
        cursor: pointer;
      }
    }
  }

  .user {
    position: absolute;
    top: -10px;
    left: 13px;
    z-index: 10;
  }

  .userok {
    width: 100%;
    height: 30px;
    background-color: #00cf8c;
    border: 0;
    font-weight: 500;
    color: #FFFFFF;
  }

}
</style>